<template>
  <ul class="detailed">
    <li>
      <label>用户名：</label>
      <span>{{ data.username }}</span>
    </li>
    <li>
      <label>真实姓名：</label>
      <span>{{ data.truename }}</span>
    </li>
    <li>
      <label>性别：</label>
      <span>{{ data.gender === 1 ? "男" : "女"}}</span>
    </li>
    <li>
      <label>身份证（正面）</label>
      <span>
        <img :src="data.cardPhotoFace" />
      </span>
    </li>
  </ul>
</template>

<script>
import {Detailed} from "@/api/member.js";

export default {
  data() {
    return {
      id: this.$route.query.id,
      data: {}
    }
  },
  beforeMount() {
    this.id && this.handleDetail();
  },
  methods: {
    handleDetail() {
      Detailed({id:this.id}).then((res) => {
        const data = res.data;
        data && (this.data = data);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detailed { 
  line-height: 34px;
  li {
    display: flex;
    label { 
      width: 100px;
      font-weight: bold;
    }
    span {
      flex: 1;
    }
    img { 
      width: 200px;
    }
  }
}
</style>